<template>
  <div class="tabs-container">
    <a-tabs type="line">
      <a-tab-pane key="text2img" title="文生图">
        <div class="input-area">
          <!-- 输入区域，只在非生成状态下显示 -->
          <div class="text-input-container" v-if="!isGenerating || generatedImage">
            <div class="selected-styles" v-if="getPrompt">
              <a-tag 
                v-for="(style, index) in getPrompt.split('，')"
                :key="index"
                closable
                class="style-tag"
                @close="handleStyleTagClose(getStyleType(index))"
              >
                {{ style }}
              </a-tag>
            </div>
            <a-textarea
              v-model="textInput"
              :auto-size="{ minRows: 3, maxRows: 5 }"
              placeholder="描述你想要的吉卜力风格场景..."
            />
            <div class="input-tools">
              <div class="tool-icons">
                <a-dropdown trigger="click" position="bl">
                  <a-button 
                    shape="circle" 
                    class="tool-btn"
                    :class="{ 'tool-btn-active': selectedStyles.ghibli !== 'none' }"
                  >
                    <template #icon>
                      <icon-apps />
                    </template>
                  </a-button>
                  <template #content>
                    <a-doption
                      v-for="item in styleMenus.ghibli"
                      :key="item.value"
                      :value="item.value"
                      @click="selectedStyles.ghibli = item.value"
                    >
                      {{ item.label }}
                    </a-doption>
                  </template>
                </a-dropdown>
                <a-dropdown trigger="click" position="bl">
                  <a-button 
                    shape="circle" 
                    class="tool-btn"
                    :class="{ 'tool-btn-active': selectedStyles.ratio !== 'none' }"
                  >
                    <template #icon>
                      <icon-image />
                    </template>
                  </a-button>
                  <template #content>
                    <a-doption
                      v-for="item in styleMenus.ratio"
                      :key="item.value"
                      :value="item.value"
                      @click="selectedStyles.ratio = item.value"
                    >
                      {{ item.label }}
                    </a-doption>
                  </template>
                </a-dropdown>
                <a-dropdown trigger="click" position="bl">
                  <a-button 
                    shape="circle" 
                    class="tool-btn"
                    :class="{ 'tool-btn-active': selectedStyles.color !== 'none' }"
                  >
                    <template #icon>
                      <icon-moon />
                    </template>
                  </a-button>
                  <template #content>
                    <a-doption
                      v-for="item in styleMenus.color"
                      :key="item.value"
                      :value="item.value"
                      @click="selectedStyles.color = item.value"
                    >
                      {{ item.label }}
                    </a-doption>
                  </template>
                </a-dropdown>
                <a-dropdown trigger="click" position="bl">
                  <a-button 
                    shape="circle" 
                    class="tool-btn"
                    :class="{ 'tool-btn-active': selectedStyles.angle !== 'none' }"
                  >
                    <template #icon>
                      <icon-camera />
                    </template>
                  </a-button>
                  <template #content>
                    <a-doption
                      v-for="item in styleMenus.angle"
                      :key="item.value"
                      :value="item.value"
                      @click="selectedStyles.angle = item.value"
                    >
                      {{ item.label }}
                    </a-doption>
                  </template>
                </a-dropdown>
              </div>
              <div class="button-group">
                <a-button 
                  type="primary" 
                  class="generate-btn"
                  :loading="isGenerating"
                  @click="handleGenerate"
                >
                  {{ isGenerating ? '生成中...' : '生成图片' }}
                  <template #icon>
                    <icon-right v-if="!isGenerating" />
                    <icon-loading v-else />
                  </template>
                </a-button>
                <a-button 
                  class="fullpage-btn"
                  @click="goToImageGenerationPage"
                >
                  全屏创作
                  <template #icon>
                    <icon-fullscreen />
                  </template>
                </a-button>
              </div>
            </div>
          </div>
          
          <!-- 生成中的进度条页面 -->
          <div v-if="isGenerating && !generatedImage" class="generation-progress">
            <div class="progress-container">
              <div class="progress-animation">
                <icon-loading class="loading-icon" />
              </div>
              <h2 class="progress-title">正在生成您的图片</h2>
              <p class="progress-description">AI 正在根据您的描述创作吉卜力风格图片...</p>
              
              <!-- 假进度条 -->
              <div class="progress-bar-container">
                <div class="progress-bar" :style="{ width: `${progressPercentage}%` }"></div>
              </div>
              <div class="progress-percentage">{{ progressPercentage }}%</div>
              
              <div class="progress-steps">
                <div class="step" :class="{ 'active': progressPercentage >= 25 }">
                  <div class="step-icon">1</div>
                  <div class="step-text">分析提示词</div>
                </div>
                <div class="step" :class="{ 'active': progressPercentage >= 50 }">
                  <div class="step-icon">2</div>
                  <div class="step-text">构建场景</div>
                </div>
                <div class="step" :class="{ 'active': progressPercentage >= 75 }">
                  <div class="step-icon">3</div>
                  <div class="step-text">应用风格</div>
                </div>
                <div class="step" :class="{ 'active': progressPercentage >= 100 }">
                  <div class="step-icon">4</div>
                  <div class="step-text">完成创作</div>
                </div>
              </div>

              <div class="generation-tips">
                <p>生成过程通常需要 10-15 秒，请耐心等待...</p>
              </div>
            </div>
          </div>
          
          <!-- 生成的图片展示区域 -->
          <div v-if="generatedImage" class="generated-image-container">
            <div class="image-card">
              <img :src="generatedImage" alt="Generated Image" class="generated-image" />
              <div class="image-info">
                <p v-if="revisedPrompt" class="revised-prompt">
                  <span class="prompt-label">修改后的提示词:</span> {{ revisedPrompt }}
                </p>
                <div class="image-actions">
                  <a-button type="outline" size="small" @click="openInNewWindow(generatedImage)">
                    在新窗口打开
                  </a-button>
                  <a-button type="primary" size="small" @click="downloadImage(generatedImage)">
                    下载图片
                  </a-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-tab-pane>
      <a-tab-pane key="img2img" title="图生图">
        <div class="hot-tag">热门</div>
        <div class="upload-area">
          <a-upload
            drag
            accept="image/*"
            :show-file-list="false"
            @change="handleUpload"
          >
            <div class="upload-box">
              <icon-upload class="upload-icon" />
              <p>点击或拖拽上传图片</p>
              <span class="upload-hint">支持 jpg、png、webp 格式</span>
            </div>
          </a-upload>
        </div>
      </a-tab-pane>
      <a-tab-pane key="tags" title="热门标签">
        <div class="tags-wrapper">
          <a-tag
            v-for="tag in popularTags"
            :key="tag"
            class="tag"
            @click="addTag(tag)"
          >
            {{ tag }}
          </a-tag>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'
import { useAuth, useSession } from '@clerk/vue'
import { useRouter } from 'vue-router'
import {
  IconApps,
  IconImage,
  IconMoon,
  IconCamera,
  IconRight,
  IconUpload,
  IconLoading,
  IconFullscreen
} from '@arco-design/web-vue/es/icon'
import { generateImage, setAuthToken } from '../services/api'

interface StyleOption {
  label: string
  value: string
}

interface StyleMenus {
  ghibli: StyleOption[]
  ratio: StyleOption[]
  color: StyleOption[]
  angle: StyleOption[]
}

interface SelectedStyles {
  ghibli: string
  ratio: string
  color: string
  angle: string
}

const router = useRouter()

const textInput = ref('')

const popularTags = [
  '宫崎骏风格', '龙猫', '千与千寻', '天空之城',
  '水彩画', '动漫场景', '自然风光', '童话风格',
  '森林', '海洋', '城堡', '飞行场景'
]

const addTag = (tag: string) => {
  if (textInput.value) {
    textInput.value += '，' + tag
  } else {
    textInput.value = tag
  }
}

const styleMenus: StyleMenus = {
  ghibli: [
    { label: '无风格', value: 'none' },
    { label: '吉卜力', value: 'ghibli' },
    { label: '皮克斯', value: 'pixar' },
    { label: '新海诚', value: 'shinkai' },
    { label: '迪士尼', value: 'disney' }
  ],
  ratio: [
    { label: '无比例', value: 'none' },
    { label: '正方形', value: 'square' },
    { label: '宽图', value: 'wide' },
    { label: '长图', value: 'tall' }
  ],
  color: [
    { label: '无颜色', value: 'none' },
    { label: '暖色调', value: 'warm' },
    { label: '冷色调', value: 'cold' },
    { label: '柔和的颜色', value: 'soft' },
    { label: '鲜艳的颜色', value: 'vivid' },
    { label: '粉彩色', value: 'pastel' },
    { label: '黑白', value: 'bw' }
  ],
  angle: [
    { label: '无构图', value: 'none' },
    { label: '模糊背景', value: 'blur-bg' },
    { label: '特写', value: 'close-up' },
    { label: '广角', value: 'wide-angle' },
    { label: '景深', value: 'depth' },
    { label: '从下往上拍', value: 'low-angle' },
    { label: '从上往下拍', value: 'high-angle' },
    { label: '微距摄影', value: 'macro' }
  ]
}

const selectedStyles = ref<SelectedStyles>({
  ghibli: 'none',
  ratio: 'none',
  color: 'none',
  angle: 'none'
})

const getStyleLabel = (type: keyof StyleMenus, value: string) => {
  return styleMenus[type].find(item => item.value === value)?.label || '请选择'
}

const getPrompt = computed(() => {
  const styles = []
  if (selectedStyles.value.ghibli !== 'none') {
    styles.push(getStyleLabel('ghibli', selectedStyles.value.ghibli))
  }
  if (selectedStyles.value.ratio !== 'none') {
    styles.push(getStyleLabel('ratio', selectedStyles.value.ratio))
  }
  if (selectedStyles.value.color !== 'none') {
    styles.push(getStyleLabel('color', selectedStyles.value.color))
  }
  if (selectedStyles.value.angle !== 'none') {
    styles.push(getStyleLabel('angle', selectedStyles.value.angle))
  }
  return styles.join('，')
})

const getStyleType = (index: number) => {
  const styles = getPrompt.value.split('，')
  const style = styles[index]
  if (style === getStyleLabel('ghibli', selectedStyles.value.ghibli)) {
    return 'ghibli'
  } else if (style === getStyleLabel('ratio', selectedStyles.value.ratio)) {
    return 'ratio'
  } else if (style === getStyleLabel('color', selectedStyles.value.color)) {
    return 'color'
  } else if (style === getStyleLabel('angle', selectedStyles.value.angle)) {
    return 'angle'
  }
  return ''
}

const handleStyleTagClose = (type: string) => {
  if (type && (type === 'ghibli' || type === 'ratio' || type === 'color' || type === 'angle')) {
    selectedStyles.value[type as keyof SelectedStyles] = 'none'
  }
}

const { isSignedIn } = useAuth()
const { session } = useSession()

const updateAuthToken = async () => {
  if (isSignedIn.value && session.value) {
    try {
      const token = await session.value.getToken()
      if (token) {
        setAuthToken(token)
        return true
      }
    } catch (error) {
      console.error('获取Clerk token失败:', error)
    }
  }
  return false
}

onMounted(async () => {
  await updateAuthToken()
})

// 生成状态
const isGenerating = ref(false)
const generatedImage = ref('')
const revisedPrompt = ref('')

// 假进度条
const progressPercentage = ref(0)
let progressInterval: number | null = null

// 启动假进度条
const startFakeProgress = () => {
  // 重置进度
  progressPercentage.value = 0
  
  // 清除可能存在的旧定时器
  if (progressInterval) {
    clearInterval(progressInterval)
  }
  
  // 设置新的进度更新定时器
  progressInterval = window.setInterval(() => {
    // 进度增加逻辑
    if (progressPercentage.value < 95) {
      // 前期快速增加
      if (progressPercentage.value < 30) {
        progressPercentage.value += 3
      } 
      // 中期缓慢增加
      else if (progressPercentage.value < 70) {
        progressPercentage.value += 1
      } 
      // 后期更缓慢增加
      else {
        progressPercentage.value += 0.5
      }
    }
  }, 200)
}

// 完成进度条
const completeProgress = () => {
  // 清除定时器
  if (progressInterval) {
    clearInterval(progressInterval)
    progressInterval = null
  }
  
  // 直接设置为100%
  progressPercentage.value = 100
}

// 生成图片
const handleGenerate = async () => {
  if (!getPrompt.value) {
    Message.warning('请输入描述或选择风格')
    return
  }

  try {
    // 设置生成状态
    isGenerating.value = true
    generatedImage.value = ''
    revisedPrompt.value = ''
    
    // 启动假进度条
    startFakeProgress()

    // 实际API调用
    await updateAuthToken()

    let fullPrompt = textInput.value
    if (getPrompt.value) {
      fullPrompt = `${getPrompt.value}${textInput.value ? '，' + textInput.value : ''}`
    }

    const response = await generateImage({
      model: 'dall-e-3',
      prompt: fullPrompt,
      n: 1,
      size: '1024x1024'
    })

    if (response.success && response.result.data && response.result.data.length > 0) {
      // 完成进度条
      completeProgress()
      
      // 保存图像数据到本地存储
      const imageUrl = response.result.data[0].url
      const revisedPromptText = response.result.data[0].revised_prompt
      
      const newImageData = {
        url: imageUrl,
        revised_prompt: revisedPromptText,
        created_at: Date.now()
      }
      
      // 确保数据正确保存
      try {
        // 获取现有图像列表
        let imageList = []
        const storedData = localStorage.getItem('gilipu_generated_image')
        
        if (storedData) {
          try {
            const parsedData = JSON.parse(storedData)
            
            // 处理旧版本的单个图像数据格式
            if (parsedData && !Array.isArray(parsedData) && parsedData.url) {
              // 将单个对象转换为数组格式
              imageList = [{
                url: parsedData.url,
                revised_prompt: parsedData.revised_prompt,
                created_at: Date.now() - 1000 // 稍早于新图像
              }]
            } else if (Array.isArray(parsedData)) {
              // 新格式，直接使用
              imageList = parsedData
            }
          } catch (e) {
            console.error('解析存储的图像数据失败:', e)
            imageList = []
          }
        }
        
        // 将新图像添加到列表开头
        imageList.unshift(newImageData)
        
        // 保存更新后的列表
        localStorage.setItem('gilipu_generated_image', JSON.stringify(imageList))
        console.log('图像数据已保存:', newImageData)
      } catch (e) {
        console.error('保存图像数据失败:', e)
      }
      
      // 进度条完成后，重置生成状态
      setTimeout(() => {
        // 重置生成状态
        isGenerating.value = false
        
        // 滚动到生成图片部分
        const generatedImageSection = document.getElementById('generated-image')
        if (generatedImageSection) {
          // 如果存在生成图片部分，滚动到该部分
          generatedImageSection.scrollIntoView({ behavior: 'smooth' })
          
          // 刷新页面以显示生成的图片部分
          window.location.reload()
        }
      }, 600)
      
      // 跳转到我的作品部分
      setTimeout(() => {
        router.push('/my-works')
      }, 1000)
      
      return // 提前返回，不再执行后续的状态设置
    } else {
      throw new Error('生成失败')
    }
  } catch (error) {
    console.error('生成图片出错:', error)
    Message.error('生成图片失败，请重试')
    isGenerating.value = false
    
    // 清除进度条
    if (progressInterval) {
      clearInterval(progressInterval)
      progressInterval = null
    }
  }
}

// 组件卸载时清除定时器
onMounted(() => {
  return () => {
    if (progressInterval) {
      clearInterval(progressInterval)
    }
  }
})

const openInNewWindow = (url: string | null) => {
  if (url) {
    window.open(url, '_blank')
  }
}

const downloadImage = (url: string | null) => {
  if (url) {
    const link = document.createElement('a')
    link.href = url
    link.download = `ghibli-image-${Date.now()}.png`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }
}

const handleUpload = (_: any) => {
  Message.success('上传成功')
}

// 跳转到全屏图片生成页面
const goToImageGenerationPage = () => {
  router.push('/image-generation')
}
</script>

<style scoped>
.tabs-container {
  background: rgb(244, 245, 245);
  border-radius: 16px;
  padding: 0;
  width: 100%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

:deep(.arco-tabs) {
  padding: 0;
}

:deep(.arco-tabs-nav) {
  padding: 0 1rem;
  border-bottom: none;
  margin-bottom: 0;
}

:deep(.arco-tabs-nav::before) {
  display: none;
}

:deep(.arco-tabs-tab) {
  padding: 12px 24px !important;
  font-size: 14px;
}

:deep(.arco-tabs-tab-active) {
  color: rgb(51, 54, 57) !important;
}

:deep(.arco-tabs-content) {
  padding: 0;
}

:deep(.arco-dropdown-option) {
  padding: 8px 12px !important;
  font-size: 14px !important;
}

:deep(.arco-dropdown-option:hover) {
  background: rgba(22, 93, 255, 0.1) !important;
}

:deep(.arco-dropdown-option-active) {
  color: rgb(22, 93, 255) !important;
  background: rgba(22, 93, 255, 0.1) !important;
}

.input-area {
  padding: 12px;
}

.text-input-container {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s;
}

.selected-styles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px 4px;
  border-bottom: 1px solid rgb(229, 230, 235);
}

.style-tag {
  background: rgb(242, 243, 245) !important;
  border: none !important;
  color: rgb(78, 89, 105) !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
}

:deep(.arco-tag-close-btn) {
  font-size: 12px !important;
  margin-left: 4px !important;
}

:deep(.arco-textarea-wrapper) {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

:deep(.arco-textarea) {
  padding: 16px !important;
  font-size: 14px !important;
  border: none !important;
  background: transparent !important;
  resize: none !important;
  box-shadow: none !important;
  color: rgb(51, 54, 57) !important;
}

:deep(.arco-textarea):focus {
  box-shadow: none !important;
}

:deep(.arco-textarea)::placeholder {
  color: rgb(134, 144, 156);
}

.input-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgb(250, 250, 250);
  border-top: 1px solid rgb(229, 230, 235);
}

.button-group {
  display: flex;
  gap: 8px;
}

.tool-icons {
  display: flex;
  gap: 4px;
}

.tool-btn {
  color: rgb(134, 144, 156) !important;
  width: 32px !important;
  height: 32px !important;
  font-size: 16px !important;
  transition: all 0.2s !important;
}

.tool-btn:hover {
  color: rgb(51, 54, 57) !important;
  background: rgb(242, 243, 245) !important;
}

.tool-btn-active {
  color: rgb(22, 93, 255) !important;
  background: rgba(22, 93, 255, 0.1) !important;
}

.tool-btn-active:hover {
  color: rgb(22, 93, 255) !important;
  background: rgba(22, 93, 255, 0.15) !important;
}

.generate-btn {
  background: rgb(22, 93, 255) !important;
  border-color: rgb(22, 93, 255) !important;
  border-radius: 6px !important;
  padding: 0 16px !important;
  height: 32px !important;
  font-size: 14px !important;
  transition: all 0.2s !important;
}

.generate-btn:hover {
  background: rgb(64, 128, 255) !important;
  border-color: rgb(64, 128, 255) !important;
  transform: translateY(-1px);
}

.fullpage-btn {
  border-radius: 6px !important;
  padding: 0 16px !important;
  height: 32px !important;
  font-size: 14px !important;
  transition: all 0.2s !important;
}

.fullpage-btn:hover {
  background: rgb(242, 243, 245) !important;
  transform: translateY(-1px);
}

.upload-area {
  padding: 24px;
}

:deep(.arco-upload-drag) {
  background: transparent !important;
  border: 2px dashed rgb(229, 230, 235) !important;
  border-radius: 12px !important;
  padding: 32px !important;
  transition: all 0.2s !important;
}

:deep(.arco-upload-drag):hover {
  border-color: rgb(22, 93, 255) !important;
  background: rgba(22, 93, 255, 0.04) !important;
  transform: translateY(-1px);
}

.upload-icon {
  font-size: 32px;
  color: rgb(134, 144, 156);
  margin-bottom: 16px;
}

.upload-hint {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: rgb(134, 144, 156);
}

.tags-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px;
}

.tag {
  background: rgb(242, 243, 245) !important;
  border: none !important;
  color: rgb(78, 89, 105) !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.tag:hover {
  background: rgb(22, 93, 255) !important;
  color: white !important;
  transform: translateY(-1px);
}

.hot-tag {
  position: absolute;
  top: 8px;
  right: 16px;
  background: rgb(255, 87, 87);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.generated-image-container {
  margin-top: 16px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.image-card {
  display: flex;
  flex-direction: column;
}

.generated-image {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px 8px 0 0;
}

.image-info {
  padding: 16px;
}

.revised-prompt {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: rgb(78, 89, 105);
  line-height: 1.5;
}

.prompt-label {
  font-weight: 500;
  color: rgb(51, 54, 57);
}

.image-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* 生成进度页面样式 */
.generation-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 40px 20px 60px 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 30px;
  overflow-y: auto;
  max-height: 80vh;
}

.progress-container {
  width: 100%;
  max-width: 500px;
  text-align: center;
  padding-bottom: 20px;
}

.progress-animation {
  margin-bottom: 24px;
}

.loading-icon {
  font-size: 48px;
  color: rgb(22, 93, 255);
}

.progress-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 12px;
  color: rgb(51, 54, 57);
}

.progress-description {
  font-size: 16px;
  color: rgb(78, 89, 105);
  margin-bottom: 32px;
}

.progress-bar-container {
  height: 8px;
  background: rgb(242, 243, 245);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-bar {
  height: 100%;
  background: rgb(22, 93, 255);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-percentage {
  text-align: right;
  font-size: 14px;
  color: rgb(78, 89, 105);
  margin-bottom: 24px;
}

.progress-steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: 32px;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
}

.step-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgb(242, 243, 245);
  color: rgb(134, 144, 156);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.step-text {
  font-size: 12px;
  color: rgb(134, 144, 156);
  text-align: center;
  transition: all 0.3s ease;
}

.step.active .step-icon {
  background: rgb(22, 93, 255);
  color: white;
}

.step.active .step-text {
  color: rgb(22, 93, 255);
  font-weight: 500;
}

.generation-tips {
  margin-top: 24px;
  padding: 12px;
  background: rgb(250, 250, 250);
  border-radius: 8px;
}

.generation-tips p {
  margin: 0;
  font-size: 14px;
  color: rgb(134, 144, 156);
}

@media (max-width: 768px) {
  .progress-title {
    font-size: 20px;
  }
  
  .progress-description {
    font-size: 14px;
  }
  
  .step-text {
    font-size: 10px;
  }
  
  .generation-progress {
    padding: 20px 16px 40px 16px;
  }
}
</style>
